
<template>
          <ts-card :header="title">
        <template #header>
            <el-button style="float: right; margin-right: 10px" type="primary" size="small" :icon="Plus" @click="addData">添加{{ title }}</el-button>
          <!-- <i  @click="addNode">
            <el-icon>
              <Plus />
            </el-icon>
          </i> -->
        </template>
    
    <template v-for="(item, index) in dataList" :key="index">
        <el-card shadow="never" style="margin-top:10px;margin-bottom:10px">
            <template #header>
                <span>{{ title }}{{ index + 1 }}</span>
                <slot name="header"></slot>
                <div style="float: right;margin-top: -3px;display: flex;gap:10px">
                    <slot name="headerRight" :data="{item:item,index:index}"></slot>
                    <el-button v-if="edit" type="warning" text :icon="Edit" @click="editData(item)">修改</el-button>
                    <el-button type="danger" text :icon="Delete" @click="deleteData(index)">删除</el-button>
                    
                </div>
            </template>
            <slot name="content" :item="item" :edit="item.operationType"></slot>
        </el-card>
    </template>
</ts-card>
</template>
<script setup>
import { ref, watch ,onMounted,defineModel} from 'vue'
import { Delete, Edit, Plus } from '@element-plus/icons-vue'
const emit = defineEmits(['update:modelValue', 'delete'])
const props = defineProps({
    modelValue: { type: Array, default: () => [] },
    title: { type: String, default: "" },
    addTemplate: { type: Object, default: () => { } },
    edit: { type: Boolean, default: false }
})
const dataList = defineModel()
const addData = () => {
    const temp = Object.assign({}, props.addTemplate);//深拷贝
    temp.operationType = 'add'
    dataList.value.push(temp)
}
const deleteData = (index) => {
    if (dataList.value[index].operationType !== 'add') {
        dataList.value[index].operationType = 'delete'
        emit('delete', dataList.value[index])
    }
    dataList.value.splice(index, 1)
}
const editData = (item) => {
    if (item.operationType == '') {
        item.operationType = 'update'
    }
    else if (item.operationType == 'update') {
        item.operationType = ''
    }
}
</script>
<style lang="less" scoped>
:deep(.el-card__header) {
    padding: 10px !important;
    line-height: 22px;
    font-size: 16px;
    height: 45px;
    background: #f6f6f6;
}

.float-right {
    float: right;
}
</style>

